<template>
    <div class="tools">
        <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="num"
            :page-sizes="_pageSizes"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'pagination',
    props: {
        total: 0,
        pageNum: {
            default: 1,
            type: Number
        },
        getList: {
            default: null,
            type: Function
        }
    },
    data () {
        return {
            num: 1,
            size: 20
        }
    },

    watch: {
        pageNum (val) {
            this.num = val
        },
        pageSize (val) {
            this.size = val
        }
    },

    methods: {
        pageChange (val) {
            this.num = val
            this.getList(val, this.size)
        },
        sizeChange (val) {
            this.num = 1
            this.size = val
            this.getList(1, val)
        }
    }
}
</script>

<style lang="scss" scoped>
    .tools {
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
    }
</style>
